import React, { useState } from "react";
import { Icon, Tabs } from "zarm";
import Cinema from "../movies/cinema/Cinema";
import Hot from "../movies/hot/Hot";
import Wait from "../movies/wait/Wait";
import Classics from "../movies/classics/Classics";
import "./topnav.scss";
import { withRouter } from "react-router-dom";
const { Panel } = Tabs;
const Topnav = (props) => {
  const [navlist] = useState([
    {
      title: "热映",
      itemkey: "/home/movies/hot",
      Componnets: <Hot className="content" />,
    },
    {
      title: "影院",
      itemkey: "/home/movies/cinema",
      Componnets: <Cinema className="content" />,
    },
    {
      title: "待映",
      itemkey: "/home/movies/wait",
      Componnets: <Wait className="content" />,
    },
    {
      title: "经典电影",
      itemkey: "/home/movies/classics",
      Componnets: <Classics className="content" />,
    },
  ]);
  const [cityname] = useState(localStorage.getItem("cityname"));

  const handlechange = (i) => {
    // console.log(i);
    switch (i) {
      case 0:
        props.history.push("/home/movies/hot");
        break;
      case 1:
        props.history.push("/home/movies/cinema");
        break;
      case 2:
        props.history.push("/home/movies/wait");
        break;
      case 3:
        props.history.push("/home/movies/classics");
        break;
      default:
        break;
    }
  };
  const gotoCity = () => {
    props.history.push("/cites");
  };
  return (
    <div className="topnav">
      <div className="city" onClick={gotoCity}>
        <span>{cityname || "北京"}</span>
        <Icon type="icon-xiajiantou" theme="primary" className="icon-jiantou" />
      </div>
      <Tabs swipeable onChange={handlechange} lineWidth="40px">
        {navlist.map((item) => {
          return (
            <Panel
              key={item.itemkey}
              title={item.title}
              itemkey={item.itemkey}
            ></Panel>
          );
        })}
      </Tabs>
      <div className="search">
        <Icon
          type="icon-icon-system-search"
          theme="primary"
          className="icon-sousuo"
        />
      </div>
    </div>
  );
};
export default withRouter(Topnav);
